<template>
	<view class="items">
		<view class="item" v-for="(item, index) in commentList" :key="index" @click="toDetail(item)">
			<view class="header">
				<view class="date">
					评价日期：{{item.commentDate}}
				</view>
				<view class="rate">
					<u-rate v-model="item.grade" readonly :size="24"></u-rate>
				</view>
			</view>
			<view class="title oneline">
				{{item.eventName}}
			</view>
			<view class="cover">
				<image :src="item.firstMedia" mode="aspectFill"></image>
			</view>
			<view class="content twoline">
				{{item.content}}
			</view>
			<view class="status" v-if="item.status === 'FEATURED'">
				<image src="/static/images/flower-icon.png" mode="widthFix"></image>
				该纪实已精选
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			commentList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {

			}
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/study/comment-detail?id=${item.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.items {
		.item {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.header {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.date {
					color: #666;
				}
			}

			.title {
				color: #218BCC;
				margin: 30rpx 0;
				height: 80rpx;
			}

			.cover {
				width: 100%;
				height: 360rpx;
				object-fit: cover;

				image {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}

			.content {
				margin: 30rpx 0;
				color: #666;
				font-size: 28rpx;
			}

			.status {
				display: flex;
				flex-direction: row;
				justify-content: end;
				align-items: center;
				color: #DC3F3D;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>